
(function($) {

   $.widget("epliquids.tileview", {
    options: {
      height: 'auto',
      width: 'auto',
      tileHeight: '100',
      tileWidth: '200',
      readonly: false     
    },
    _create: function() {
      var tileView = this.element; 

    	tileView.addClass('ui-widget');

      tileView 
        .addClass('ui-helper-reset')   
        .wrapInner('<div class="minimized-tiles" />')
        .prepend('<div class="maximized-tiles" />')
        .height(this.options.height)
        .width(this.options.width);       

      this.height = tileView.height();
      this.width = tileView.width();

      if (this.options.width === 'auto')  
      {
          this.width = 3 * this.options.width;
      }

      this.minimizedTiles = tileView.find('.minimized-tiles');
      this.maximizedTiles = tileView.find('.maximized-tiles');

      this.minimizedTiles.sortable({ connectWith: ".tile-view-tile" });    

      tileView
        .find('.tile-view-header')
    		.prepend('<div class="ui-icon ui-icon-arrow-4-diag maximizer"/>')
    		.addClass('ui-widget-header');

		  tileView
        .find('.tile-view-tile')
			  .addClass('ui-widget-content')
        .height(this.options.tileHeight)
        .width(this.options.tileWidth);

      tileView.find('.maximizer')
        .click(this.handleTile(this));      
      tileView.find('.tile-view-header')
        .dblclick(this.handleTile(this));      
    },
    _setOption: function(key, value) {
      $.Widget.prototype._setOption.apply(this, arguments);
    },
    _init: function() {
    },
    handleTile: function (scope) { 
      return function() {
        var newItem = $(this).closest(".tile-view-tile");                                  

        if (newItem.hasClass("maximized-tile"))
        {          
          newItem
            .removeClass('maximized-tile')
            .height(scope.options.tileHeight)
            .width(scope.options.tileWidth);          

          scope.minimizedTiles            
            .height(scope.height)  
            .width(scope.width)         
            .append(newItem);  

          scope.maximizedTiles.hide();

        } else {
          var tiles2MoveMin = scope.maximizedTiles
            .find('.tile-view-tile.maximized-tile')
            .removeClass('maximized-tile')
            .height(scope.options.tileHeight)    
            .width(scope.options.tileWidth);    

          scope.minimizedTiles            
            .height(scope.height)  
            .width(scope.options.tileWidth + 40)      
            .append(tiles2MoveMin);            
          
          newItem
            .height(scope.height)
            .width(scope.width - scope.options.tileWidth - 50)
            .addClass('maximized-tile');
          
          scope.maximizedTiles 
            .width(scope.width - scope.options.tileWidth - 50)           
            .append(newItem)
            .show();        
        }
      }     
    },
    addTile: function (element) {      
      element
         .addClass('ui-widget-content')
         .width(this.options.tileWidth)
         .height(this.options.tileHeight)
         .children('.tile-view-header')
         .prepend('<div class="ui-icon ui-icon-arrow-4-diag maximizer"/>')
         .addClass('ui-widget-header')
         .dblclick(this.handleTile(this))
         .find('.maximizer')
         .click(this.handleTile(this));      
      this.minimizedTiles.append(element);  
    },
    destroy: function() {
      $.Widget.prototype.destroy.call(this);
    }
  });
})(jQuery);

